<template>
  <div>
    <div class="card" icon="ios-options">
      <div>
        <div>
<!--          <div style="text-align: right;margin-top: 0px">-->
<!--            <Button size="small" type="error" @click="clearPick">清空</Button>-->
<!--          </div>-->
          <span class="zi">区：</span><Button style="margin-left: 65%;margin-bottom: 5px" size="small" type="error" @click="clearPick">清空</Button>
          <Select filterable :disabled="Adisabled" v-model="select1" class="cardSelect"
                  @on-change="selectChange('area',select1)">
            <Option v-for="item in select1List" :value="item.id" :key="item.id">{{ item.name }}</Option>
          </Select>
        </div>
        <div>
          <span class="zi">街道：</span>
          <Select filterable :disabled="Bdisabled" v-model="select2" class="cardSelect"
                  @on-change="selectChange('street',select2)">
            <Option v-for="item in select2List" :value="item.id" :key="item.id">{{ item.name }}</Option>
          </Select>
        </div>
        <div>
          <span class="zi">社区：</span>
          <Select filterable :disabled="Cdisabled" v-model="select3" class="cardSelect"
                  @on-change="selectChange('community',select3)">
            <Option v-for="item in select3List" :value="item.id" :key="item.id">{{ item.name }}</Option>
          </Select>
        </div>
        <div>
          <span class="zi">小区：</span>
          <Select filterable v-model="select4" class="cardSelect"
                  @on-change="selectChange('residential',select4)">
            <Option v-for="item in select4List" :value="item.id" :key="item.id">{{ item.name }}</Option>
          </Select>
        </div>
        <div>
          <span class="zi">网格：</span>
          <Select filterable v-model="select5" class="cardSelect"
                  @on-change="selectChange('garden',select5)">
            <Option v-for="item in select5List" :value="item.id" :key="item.id">{{ item.name }}</Option>
          </Select>
        </div>
        <div>
          <span class="zi">楼：</span>
          <Select filterable v-model="select6" class="cardSelect">
            <Option v-for="item in select6List" :value="item.id" :key="item.id">{{ item.name }}</Option>
          </Select>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  newFindGardenByMapList,
  newFindGridLevelList,
  newGetCompanyInfo,
  newGetGridInfoByID
} from '../../../../api/z-new-grid'

export default {
  name: 'selectInfo',
  data () {
    return {
      severUserInfo: {},
      choiceInfo: {},
      areaList: [],
      streetList: [],
      communityList: [],
      select1: '',
      select2: '',
      select3: '',
      select4: '',
      select5: '',
      select6: '',
      select1List: [],
      select2List: [],
      select3List: [],
      select4List: [],
      select5List: [],
      select6List: [],
      Adisabled: false,
      Bdisabled: false,
      Cdisabled: false
    }
  },
  methods: {
    clearPick () {
      location.reload()
    },
    /**
     * 判断查询机构信息
     */
    newGetCompanyInfo () {
      let data = {
        id: this.severUserInfo.company_id
      }
      newGetCompanyInfo(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.choiceInfo = ret.data.data
          // console.log('1111', this.choiceInfo)
          switch (this.choiceInfo.grade) {
            case '3':
              this.Adisabled = true
              this.select1 = this.choiceInfo.id
              break
            case '4':
              this.Adisabled = true
              this.Bdisabled = true
              this.select1 = this.choiceInfo.parent_id
              this.select2 = this.choiceInfo.id
              break
            case '5':
              this.Adisabled = true
              this.Bdisabled = true
              this.Cdisabled = true
              this.select1 = this.choiceInfo.parent_ids.split(',')[3]
              this.select2 = this.choiceInfo.parent_id
              this.select3 = this.choiceInfo.id
              break
          }
          this.initGetSelectMethod()
          this.callBack(this.choiceInfo)
        } else {
          this.$Notice.error({ title: '查询失败！', desc: ret.data.errmsg })
        }
      })
    },
    /**
     * 回调
     */
    callBack (e) {
      this.$emit('callBack', e)
    },
    /**
     * 初始化加载
     */
    initGetSelectMethod () {
      this.findGridLevelList(3, '')
      this.findGridLevelList(4, '')
      this.findGridLevelList(5, '')
      if (this.choiceInfo.grade === '5') {
        this.findGridLevelList(5.5, this.choiceInfo.id)
        this.newFindGardenList(this.choiceInfo.grade, this.choiceInfo.id)
      }
    },
    /**
     *  查询网格数据
     */
    newFindGardenList (e1, e2) {
      let data = {
        grade: e1,
        id: e2
      }
      newFindGardenByMapList(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.select5List = ret.data.data
        } else {
          this.$Notice.error({ title: '查询网格失败！', desc: ret.data.errmsg })
        }
      })
    },
    /**
     * 查询层级信息
     */
    findGridLevelList (e1, e2) {
      if (e2 !== undefined) {
        let data = {
          grade: e1,
          id: e2
        }
        newFindGridLevelList(data).then(ret => {
          if (ret.data.errcode === 0) {
            let data = ret.data.data
            this.disposeLevelData(e1, e2, data)
          } else {
            this.$Notice.error({ title: '查询失败！', desc: ret.data.errmsg })
          }
        })
      }
    },
    /**
     * 处理数据
     */
    disposeLevelData (e1, e2, e3) {
      switch (e1) {
        case 3:
          if (e2 === '') {
            this.areaList = e3
          }
          this.select1List = e3
          break
        case 4:
          if (e2 === '') {
            this.streetList = e3
          }
          this.select2List = e3
          break
        case 5:
          if (e2 === '') {
            this.communityList = e3
          }
          this.select3List = e3
          break
        case 5.5:
          this.select4List = e3
          break
        case 6:
          this.select5List = e3
          break
        case 7:
          this.select6List = e3
          break
      }
    },
    /**
     * 下拉
     */
    selectChange (e1, e2) {
      switch (e1) {
        case 'area':
          this.select2 = ''
          this.select3 = ''
          this.select4 = ''
          this.select5 = ''
          this.select6 = ''
          this.findGridLevelList(4, e2)
          this.newGetGridInfoByID(3, e2)
          break
        case 'street':
          this.select3 = ''
          this.select4 = ''
          this.select5 = ''
          this.select6 = ''
          this.findGridLevelList(5, e2)
          this.getUpLevelData(e1, e2)
          this.newGetGridInfoByID(4, e2)
          break
        case 'community':
          this.select4 = ''
          this.select5 = ''
          this.select6 = ''
          this.findGridLevelList(5.5, e2)
          this.newFindGardenList(5, e2)
          this.getUpLevelData(e1, e2)
          this.newGetGridInfoByID(5, e2)
          break
        case 'residential':
          this.select5 = ''
          this.select6 = ''
          this.findGridLevelList(6, e2, 'residential')
          this.newGetGridInfoByID(5.5, e2)
          break
        case 'garden':
          this.select6 = ''
          this.findGridLevelList(7, e2)
          this.newGetGridInfoByID(6, e2)
          this.getUpLevelData(e1, e2)
          break
      }
    },
    /**
     * 处理上级数据
     * @param e1
     * @param e2
     */
    getUpLevelData (e1, e2) {
      switch (e1) {
        case 'garden':
          this.select5List.forEach(gitem => {
            if (gitem.id === e2) {
              this.select4 = gitem.residential_id
            }
          })
          break
        case 'community':
          this.communityList.forEach(citem => {
            if (citem.id === e2) {
              this.select2 = citem.parent_id
              this.select2List = this.streetList
              this.select1 = citem.parent_ids.split(',')[3]
              this.select1List = this.areaList
            }
          })
          break
        case 'street':
          this.streetList.forEach(sitem => {
            if (sitem.id === e2) {
              this.select1 = sitem.parent_id
              this.select1List = this.areaList
            }
          })
          break
      }
    },
    /**
     * 根据ID查询选中登级信息
     * @param e1
     * @param e2
     */
    newGetGridInfoByID (e1, e2) {
      if (e2 !== undefined) {
        let data = {
          grade: e1,
          id: e2
        }
        newGetGridInfoByID(data).then(ret => {
          if (ret.data.errcode === 0) {
            this.choiceInfo = ret.data.data
          } else {
            this.$Notice.error({ title: '查询失败！', desc: ret.data.errmsg })
          }
        })
      }
    }
  },
  mounted () {
    this.severUserInfo = this.$store.state.user.severUserInfo
    this.newGetCompanyInfo()
  },
  watch: {
    'choiceInfo.id' (val) {
      if (val) {
        this.callBack(this.choiceInfo)
      }
    }
  }
}
</script>

<style scoped>
.cardSelect {
  width: 210px;
}

.card {
  background: rgba(255, 255, 255, 0.93);
  height: 450px;
  overflow: auto;
  z-index: 1000;
  background: #235CA7;
}

.zi {
  color: white;
}

</style>
